<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item>商户提现</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userlist">
              <div class="status_box">
                <div class="status">
                  <el-select v-model="value1" placeholder="技工ID" @change="findList()">
                    <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div class="input" @keyup.enter="findList()">
                  <el-input v-model="input" clearable></el-input>
                </div>
                <el-date-picker v-model="time" type="daterange" range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" value-format="timestamp" format="yyyy 年 MM 月 dd 日" @change="getTime()" clearable  :default-time="['00:00:00', '23:59:59']"></el-date-picker>
                <div class="search"><el-button @click="findList()">搜索</el-button></div>
              </div>
              <div class="status_box">
                <div class="status">
                  <el-select v-model="value" placeholder="状态" @change="findList()">
                    <el-option v-for="(item,index) in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="table">
                <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" fixed="left" width="50"></el-table-column>
                  <el-table-column prop="applicationNo" label="提现单号"></el-table-column>
                  <el-table-column prop="mechanicId" label="技工ID"></el-table-column>
                  <el-table-column prop="mechanicName" label="姓名"></el-table-column>
                  <el-table-column prop="createTime" label="申请时间" :formatter="dateForma"></el-table-column>
                  <el-table-column prop="id" label="支付渠道">
                    <template slot-scope="scope">
                      <span>支付宝</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="到账账户">
                    <template slot-scope="scope">
                      <span>{{scope.row.aliPayAccount}}——{{scope.row.aliPayName}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="withdrawalAmount" label="提现金额"></el-table-column>
                  <el-table-column prop="mechanicPhoneNumber" label="手机"></el-table-column>
                  <el-table-column prop="processingTime" label="处理时间" :formatter="dateForma"></el-table-column>
                  <el-table-column prop="payNo" label="支付流水号"></el-table-column>
                  <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                      <span v-if="scope.row.status==1">成功</span>
                      <span v-if="scope.row.status==2">驳回</span>
                      <span v-if="scope.row.status==3">正在提现</span>
                      <span v-if="scope.row.status==4">失败</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="feedBack" label="反馈"></el-table-column>
                  <el-table-column label="操作" fixed="right"  width="100">
                    <template slot-scope="scope">
                      <el-button @click="sure(scope.row)" type="text" size="small" v-if="scope.row.status==3">确认</el-button>
                      <el-button @click="toback(scope.row)" type="text" size="small" v-if="scope.row.status==4">退回</el-button>
                      <el-button @click="detail(scope.row)" type="text" size="small">明细</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10,20,30,40,50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total" style="text-align: right;">
                </el-pagination>
                <div class="batch">批量提现</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'Withdraw',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        page: 1,//页码
        pageSize: 10,//每页条数
        total: 0,/* 总的条数 */
        currentPage: 0,/* 前往第几页 */
        options: [{//会员内容
          value: '1',
          label: '会员ID',
        },{
          value: '2',
          label: '会员名',
        },{
          value: '3',
          label: '支付宝账号',
        }],
        value1: null,//账号状态
        input: null,// 搜索输入框
        time:null,
        startTime:null,//开始时间
        endTime:null,//结束时间
        value: null,//账号状态
        tableData: [],// 表格
        multipleSelection: [], // 选择后的列表
        options1: [{//状态
          value: '1',
          label: '成功',
        },{
          value: '2',
          label: '驳回',
        },{
          value: '3',
          label: '正在提现',
        },{
          value: '4',
          label: '失败',
        }],
      }
    },
    mounted() {
      this.findList();
    },
    methods: {
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 获取所有提现列表
      findList(){
        this.$axios.post(this.baseURL1+'admin/withdraw/list',{
          "page":this.page,
          "size":this.pageSize,
          "requestSource":"PC",
          "startTime":this.startTime,//开始时间
          "endTime":this.endTime,//结束时间
          "key":this.input,// 搜索输入框
          "status":this.value
        }).then((res)=>{
          console.log(res,"所有用户");
          if(res.data.code==1){
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //根据时间段查找
      getTime(){
        console.log(this.time)
        if(this.time==null){
          this.startTime = null
          this.endTime = null
        }else{
          this.startTime = this.time[0]
          this.endTime = this.time[1]
        }
        this.findList();
      },
      // 表格的全选
      handleSelectionChange(val) {
        console.log(val);
        this.multipleSelection = val;
      },
      // 确认提现
      sure(row) {
        console.log(row.id)
        this.$confirm('确认提现?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/withdraw/confirm',{
            "id": row.id,
            "requestSource":"PC",
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '提现成功'
              });
              setTimeout(()=>{
                this.findList();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //驳回提现
      toback(row){
        this.$confirm('确认退回?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/withdraw/refuse',{
            "id": row.id,
            "requestSource":"PC",
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '退回成功'
              });
              setTimeout(()=>{
                this.findList();
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //明细
      detail(row){
        var data = row.mechanicId;
        this.$router.push({
          path: '/WithdrawDetail',
          query: {
            data: data,
          }
        })
      },
      // 选择的每页条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.findList();
      },
      // 当前页面
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val;
        this.findList();
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .title{
    width: 80px;
    text-align: right;
    line-height: 45px;
  }
  .table{
    position: relative;
  }
  .batch{
    position: absolute;
    bottom: 0;
    padding: 0 10px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #ff5733;
    color: #fff;
    margin: 0px 10px 10px;
    border-radius: 6px;
    cursor: pointer;
  }
  >>> .el-date-editor.el-input{
    width: 200px;
  }
  >>> .el-input__inner{
    height: 35px;
    line-height: 35px;
    padding: 0 5px;
    margin: 7px 5px;
  }
  >>> .el-input__prefix{
    right: -185px;
    left: 0px;
  }
  .search{
    cursor: pointer;
    margin-left: 5px!important;
  }
  >>> .el-date-editor{
    margin-left: 10px;
  }
</style>
